<template>
  <div class="aboutUs">
    <div class="header_img">
      <img src="../../../public/images/aboutBanner.jpg" alt="" />
      <div class="header_tit">
        <div class="z_title">关于我们</div>
      </div>
    </div>
    <div class="tabbar">
      <ul>
        <li
          :class="item.path == ind ? 'active' : ''"
          v-for="(item, index) in contlist"
          :key="index"
          @click="flags(item.path)">
          <router-link target="_serf" :to="{ path: item.path }" tag="li">{{item.tit}}</router-link>
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contlist: [
        {
          path: "./Introduction",
          tit: "公司介绍",
        },
        {
          path: "./vision",
          tit: "企业文化",
        },
        {
          path: "./course",
          tit: "公司历程",
        },
        {
          path: "./news",
          tit: "平台新闻",
        },
        {
          path: "./about",
          tit: "联系我们",
        },
      ],
      ind: "./Introduction",
      Banner: "",
      urlParams: process.env.VUE_APP_DOMAIN,
    };
  },
  methods: {
    flags(e) {
      this.ind = e;
    },
  },
  watch: {
    $route(to, from) {
      this.ind = to.path.replace("/aboutUs", ".");
    },
  },
  mounted() {
    this.ind = this.$route.path.replace("/aboutUs", ".");
  },
};
</script>

<style lang="scss" scoped>
.aboutUs {
  position: relative;
  z-index: 10;

  .header_img {
    position: relative;
    z-index: 10;

    img {
      width: 100%;
    }

    .header_tit {
      position: absolute;
      top: 36%;
      left: 50%;
      color: #fff;
      transform: translatex(-50%);

      .z_title {
        font-size: 0.52rem;
        font-weight: 600;
        text-align: center;
        margin-bottom: 0.26rem;
      }

      .f_title {
        font-size: 0.26rem;
      }
    }
  }

  .tabbar {
    position: relative;
    z-index: 10;
    background: #f4f5f7;
    border-bottom: 0.02rem solid #dcdddf;

    ul {
      display: flex;
      justify-content: center;
      align-items: center;

      li {
        font-size: 0.18rem;
        height: 0.7rem;
        line-height: 0.7rem;
        margin: 0 0.3rem;
        cursor: pointer;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          top: 0.68rem;
          left: 0;
          width: 0;
          height: 0.04rem;
          background: #5646a5;
        }

        &:hover::after {
          width: 100%;
          transition: all 0.3s;
        }

        &:hover {
          color: #5646a5;
        }
      }
    }
  }
}

.active {
  color: #5646a5 !important;
  // border-bottom: 0.06rem solid #5646a5;
  position: relative;

  &::after {
    position: absolute;
    top: 0.68rem;
    left: 0;
    width: 100% !important;
    height: 0.04rem;
    background: #5646a5;
  }
}
</style>